<!DOCTYPE html>
<!--[if IE 8]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 ie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<title>Gallery | Huraga Bootstrap Admin Template</title>
		<meta name="description" content="">
		<meta name="author" content="Walking Pixels | www.walkingpixels.com">
		<meta name="robots" content="index, follow">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<!-- CSS styles -->
		<link rel='stylesheet' type='text/css' href='css/huraga-blue.css'>
		
		<!-- Fav and touch icons -->
		<link rel="shortcut icon" href="img/icons/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/icons/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="img/icons/apple-touch-icon-57-precomposed.png">
		
		<!-- JS Libs -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
		<script>window.jQuery || document.write('<script src="js/libs/jquery.js"><\/script>')</script>
		<script src="js/libs/modernizr.js"></script>
		<script src="js/libs/selectivizr.js"></script>
		
		<script>
			$(document).ready(function(){
				
				// Tooltips
				$('[title]').tooltip({
					placement: 'top'
				});
				
				// Dropdowns
				$('.dropdown-toggle').dropdown();
				
			});
		</script>
	</head>
	<body>
		
		<!-- Main page header -->
		<header class="container">
		
			<!-- Main page logo -->
			<h1><a href="login.html" class="brand">Huraga</a></h1>
			
			<!-- Main page headline -->
			<p>A beautifully minimalistic admin template</p>
			
			<!-- Alternative navigation -->
			<nav>
				<ul>
					<li>
						<form class="nav-search">
							<input type="text" placeholder="Search&hellip;">
						</form>
					</li>
					<li>
						<div class="btn-group">
							<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
								Configuration
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a href="401.html"><span class="awe-flag"></span> Error page 401</a></li>
								<li><a href="403.html"><span class="awe-flag"></span> Error page 403</a></li>
								<li><a href="404.html"><span class="awe-flag"></span> Error page 404</a></li>
								<li><a href="500.html"><span class="awe-flag"></span> Error page 500</a></li>
								<li><a href="503.html"><span class="awe-flag"></span> Error page 503</a></li>
							</ul>
						</div>
					</li>
					<li><a href="#">Logout</a></li>
				</ul>
			</nav>
			<!-- /Alternative navigation -->
			
		</header>
		<!-- /Main page header -->
		
		<!-- Main page container -->
		<section class="container" role="main">
		
			<!-- Left (navigation) side -->
			<div class="navigation-block">
			
				<!-- User profile -->
				<section class="user-profile">
					<figure>
						<img alt="John Pixel avatar" src="http://placekitten.com/60/60">
						<figcaption>
							<strong><a href="#" class="">John Pixel</a></strong>
							<em>marketing manager</em>
							<ul>
								<li><a class="btn btn-primary btn-flat" href="#" title="Account settings">settings</a></li>
								<li><a class="btn btn-primary btn-flat" href="#" title="Message inbox">inbox</a></li>
							</ul>
						</figcaption>
					</figure>
				</section>
				<!-- /User profile -->
				
				<!-- Main navigation -->
				<nav class="main-navigation" role="navigation">
					<ul>
						<li><a href="index.html" class="no-submenu"><span class="awe-home"></span>Dashboard</a></li>
						<li><a href="forms.html" class="no-submenu"><span class="awe-tasks"></span>Forms</a></li>
						<li><a href="charts.html" class="no-submenu"><span class="awe-signal"></span>Charts</a></li>
						<li><a href="tables.html" class="no-submenu"><span class="awe-table"></span>Tables <span class="badge">14</span></a></li>
						<li class="current">
							<a href="#"><span class="awe-picture"></span>Gallery</a>
							<ul>
								<li><a href="gallery.html">Car Gallery</a></li>
								<li><a href="gallery.html" class="current">Food Gallery</a></li>
								<li><a href="gallery.html">Art Gallery</a></li>
								<li><a href="gallery.html">Animal Gallery</a></li>
								<li><a href="gallery.html">Super long name to see how it collapse</a></li>
							</ul>
						</li>
						<li><a href="file-explorer.html" class="no-submenu"><span class="awe-file"></span>File explorer</a></li>
						<li><a href="calendar.html" class="no-submenu"><span class="awe-calendar"></span>Calendar</a></li>
						<li><a href="ui-buttons.html" class="no-submenu"><span class="awe-magic"></span>UI & Buttons</a></li>
						<li><a href="typo.html" class="no-submenu"><span class="awe-font"></span>Typography</a></li>
						<li><a href="grid.html" class="no-submenu"><span class="awe-th"></span>Grid <span class="badge">2</span></a></li>
						<li>
							<a href="#"><span class="awe-heart"></span>Goodies</a>
							<ul>
								<li><a href="goodies.html">Goodies</a></li>
								<li><a href="401.html">Error 401</a></li>
								<li><a href="403.html">Error 403</a></li>
								<li><a href="404.html">Error 404</a></li>
								<li><a href="500.html">Error 500</a></li>
								<li><a href="503.html">Error 503</a></li>
							</ul>
						</li>
					</ul>
				</nav>
				<!-- /Main navigation -->
				
				<!-- Sample left search bar -->
				<form class="side-search">
					<input type="text" class="rounded" placeholder="To search type and hit enter">
				</form>
				<!-- /Sample left search bar -->
				
				<!-- Sample side note -->
				<section class="side-note">
					<div class="side-note-container">
						<h2>Sample Side Note</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis erat dui, quis purus.</p>
					</div>
					<div class="side-note-bottom"></div>
				</section>
				<!-- /Sample side note -->
				
			</div>
			<!-- Left (navigation) side -->
			
			<!-- Right (content) side -->
			<div class="content-block" role="main">
			
				<!-- Page header -->
				<article class="page-header">
					<h1>Media Gallery</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit, dolor mollis adipiscing elementum, ipsum turpis euismod tellus, vitae mollis velit leo id nisi. Morbi non lectus turpis, eu interdum orci. In at rutrum nisi. Donec sit amet urna purus, at eleifend ipsum. Sed magna enim, tempor eu tincidunt vitae, dictum tristique arcu.</p>
				</article>
				<!-- /Page header -->
				
				<!-- Grid row -->
				<div class="row">
				
					<!-- Data block -->
					<article class="span12 data-block">
						<div class="data-container">
							<header>
								<h2>Image Gallery</h2>
							</header>
							<section>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fermentum tortor sed lectus dignissim nec ornare augue tincidunt. In adipiscing vulputate orci, ut aliquam nisi condimentum vitae. Nunc suscipit enim id diam venenatis mattis. Vestibulum id leo augue.</p>
								<ul class="thumbnails">
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
								</ul>
								<div class="row">
									<div class="span12">
										<h2>Endless combinations</h2>
										<p>If you want only clean images for gallery, use class <code>.raw</code> on your thumbnails container.</p>
										<p>Duis eu porta ligula. In tempor, ipsum vitae semper adipiscing, nisi eros feugiat massa, in tristique elit ipsum dapibus tellus. Nullam nisi tellus, aliquam quis vestibulum et, interdum eget leo. Maecenas quam turpis, luctus vel imperdiet ac, tempus id erat. Nullam nec diam erat. Fusce cursus arcu ac magna lobortis bibendum. Nunc eu elementum quam.</p>
										<ul class="thumbnails raw">
											<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image2.png"></a></li>
											<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image2.png"></a></li>
											<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image2.png"></a></li>
											<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image2.png"></a></li>
											<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image2.png"></a></li>
											<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image2.png"></a></li>
										</ul>
									</div>
								</div>
							</section>
						</div>
					</article>
					<!-- /Data block -->
					
				</div>
				<!-- /Grid row -->
				
				<!-- Grid row -->
				<div class="row">
				
					<!-- Data block  -->
					<article class="span12 data-block raw">
						<div class="data-container">
							<header>
								<h2>Image Gallery in raw data block</h2>
							</header>
							<section>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fermentum tortor sed lectus dignissim nec ornare augue tincidunt. In adipiscing vulputate orci, ut aliquam nisi condimentum vitae. Nunc suscipit enim id diam venenatis mattis. Vestibulum id leo augue.</p>
								<ul class="thumbnails">
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
									<li class="span2"><a class="thumbnail" href="#"><img alt="" src="img/assets/sample-image.png"></a></li>
								</ul>
							</section>
						</div>
					</article>
					<!-- /Data block  -->
					
				</div>
				<!-- /Grid row -->
				
				<!-- Grid row -->
				<div class="row">
				
					<!-- Data block  -->
					<article class="span12 data-block decent">
						<div class="data-container">
							<header>
								<h2>Image Gallery</h2>
							</header>
							<section>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fermentum tortor sed lectus dignissim nec ornare augue tincidunt. In adipiscing vulputate orci, ut aliquam nisi condimentum vitae. Nunc suscipit enim id diam venenatis mattis. Vestibulum id leo augue.</p>
								<form class="form-gallery">
									<ul class="thumbnails">
										<li class="span6">
											<input id="img1" type="checkbox" value="option" checked>
											<a class="thumbnail" href="#"><img alt="Image 1" src="img/assets/sample-image3.png"></a>
										</li>
										<li class="span3">
											<input id="img2" type="checkbox" value="option" checked>
											<a class="thumbnail" href="#"><img alt="Image 2" src="img/assets/sample-image2.png"></a>
										</li>
										<li class="span3">
											<input id="img3" type="checkbox" value="option">
											<a class="thumbnail" href="#"><img alt="Image 3" src="img/assets/sample-image2.png"></a>
										</li>
										<li class="span3">
											<input id="img4" type="checkbox" value="option">
											<a class="thumbnail" href="#"><img alt="Image 4" src="img/assets/sample-image2.png"></a>
										</li>
										<li class="span3">
											<input id="img5" type="checkbox" value="option">
											<a class="thumbnail" href="#"><img alt="Image 5" src="img/assets/sample-image2.png"></a>
										</li>
										<li class="span3">
											<input id="img6" type="checkbox" value="option">
											<a class="thumbnail" href="#"><img alt="Image 6" src="img/assets/sample-image2.png"></a>
										</li>
										<li class="span3">
											<input id="img7" type="checkbox" value="option">
											<a class="thumbnail" href="#"><img alt="Image 7" src="img/assets/sample-image2.png"></a>
										</li>
										<li class="span3">
											<input id="img8" type="checkbox" value="option">
											<a class="thumbnail" href="#"><img alt="Image 8" src="img/assets/sample-image2.png"></a>
										</li>
										<li class="span3">
											<input id="img9" type="checkbox" value="option">
											<a class="thumbnail" href="#"><img alt="Image 9" src="img/assets/sample-image2.png"></a>
										</li>
									</ul>
									<div class="form-actions">
										<select id="actions" class="span2">
											<option>edit</option>
											<option>remove</option>
											<option>archive</option>
											<option>report</option>
										</select>
										<button class="btn btn-alt btn-primary" type="submit">Selected items</button>
									</div>
								</form>
							</section>
						</div>
					</article>
					<!-- /Data block  -->
					
				</div>
				<!-- /Grid row -->
				
			</div>
			<!-- /Right (content) side -->
			
		</section>
		<!-- /Main page container -->
		
		<!-- Main page footer -->
		<footer class="container">
			<p>Built with love on <a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a> by <a href="http://www.walkingpixels.com">Walking Pixels</a>.</p>
			<ul>
				<li><a href="#" class="">Support</a></li>
				<li><a href="#" class="">Documentation</a></li>
				<li><a href="#" class="">API</a></li>
			</ul>
			<a href="#top" class="btn btn-primary btn-flat pull-right">Top &uarr;</a>
		</footer>
		<!-- /Main page footer -->
		
		<!-- Scripts -->
		<script src="js/navigation.js"></script>
		<script src="js/bootstrap/bootstrap-affix.js"></script>
		<script src="js/bootstrap/bootstrap-tooltip.js"></script>
		<script src="js/bootstrap/bootstrap-dropdown.js"></script>
		<script src="js/bootstrap/bootstrap-collapse.js"></script>
		
		<script>
			$(document).ready(function() {
					
				/* Highlight gallery item when clicked */
				$('.form-gallery input[type="checkbox"]').click(function() {
					$(this).next('a').toggleClass('active');
				});
				$('.form-gallery input[type="checkbox"]:checked').next('a').addClass('active');
				
			});
		</script>
		
	</body>
</html>
